<template>
    <div class="meiguitu" style="width:300px;height:250px;">
        <div id="meigui" ref="meigui" style="width:300px;height:250px;"></div>
    </div>
</template>

<script>
    export default {
        name: "JMEIGUITU",
        data() {
            return {

            }
        },
        mounted(){ 
            this.dataEcharts()
            
        },
        methods:{
             dataEcharts: function () {
                var myChart = this.$echarts.init(this.$refs.meigui);
                let that=this
                // myChart.clear()
                 myChart.setOption({
                      series: [
                                {
                                type: 'pie',
                                data: [
                                    {
                                      value: 300,
                                      name: 'A'
                                    },
                                    {
                                      value: 300,
                                      name: 'B'
                                                            },
                                    {
                                      value: 300,
                                      name: 'C'
                                    },
                                    {
                                      value: 300,
                                      name: 'D'
                                    },
                                    {
                                      value: 300,
                                      name: 'E'
                                    }
                                ],
                                roseType: 'area'
                                }
                            ]
                })
             }

        },
    }
</script>

<style lang="scss" scoped>
.meiguitu{
    width: 200px;
    float:left;
    margin-left:50px ;
}

</style>   